<template>
  <div class="padding-10 background-color-l5">
    <div class="margin-bottom-10 background-color-fff border-radius-5 height-80">
      <unit-land :baseId="baseId" @dbClick="handCfg" @ocClick="ocClick"></unit-land>
    </div>
    <div>
      <el-row :gutter="10">
        <el-col :span="8" :offset="0">
          <div class="background-color-fff border-radius-5">
            <div class="height-50 flex aic">
              <span class="margin-left-10"> 种植批次 </span>
            </div>
            <div class="baseHeight padding-lr-10">
              <unit-batch :landId="landId" :refresh="refresh"></unit-batch>
            </div>
          </div>
          <div class="background-color-fff margin-top-10 border-radius-5">
            <div class="height-50 flex aic">
              <span class="margin-left-10"> 设备 </span>
            </div>
            <div class="baseHeight padding-lr-10">
              <unit-iot-device :landId="landId" :refresh="refresh"></unit-iot-device>
            </div>
          </div>
        </el-col>
        <el-col :span="8" :offset="0">
          <div class="background-color-fff border-radius-5">
            <div class="height-50 flex aic">
              <span class="margin-left-10"> 监控 </span>
            </div>
            <div class="baseHeight padding-lr-10">
              <unit-camera :landId="landId" :refresh="refresh"></unit-camera>
            </div>
          </div>
          <div class="background-color-fff margin-top-10 border-radius-5">
            <div class="height-50 flex aic">
              <span class="margin-left-10"> 自动化场景 </span>
            </div>
            <div class="baseHeight padding-lr-10 border-radius-5">
              <unit-scene :landId="landId" :refresh="refresh"></unit-scene>
            </div>
          </div>
        </el-col>
        <el-col :span="8" :offset="0">
          <div class="background-color-fff border-radius-5">
            <div class="height-50 flex aic">
              <span class="margin-left-10"> 预警 </span>
            </div>
            <div class="height padding-lr-10 padding-bottom-30">
              <unit-alert :landId="landId" :refresh="refresh"></unit-alert>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 添加或修改种植单元对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="种植批次" prop="batchIds">
          <el-select v-model="form.batchIds" multiple placeholder="请选择" class="w100">
            <el-option
              v-for="item in batchList"
              :key="item.batchId"
              :label="item.batchName"
              :value="item.batchId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物联设备" prop="deviceIds">
          <el-select v-model="form.deviceIds" multiple placeholder="请选择" class="w100">
            <el-option
              v-for="item in deviceList"
              :key="item.deviceId"
              :label="item.deviceName"
              :value="item.deviceId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监控设备" prop="deviceIds">
          <el-select v-model="form.cameraIds" multiple placeholder="请选择" class="w100">
            <el-option
              v-for="item in cameraList"
              :key="item.deviceId"
              :label="item.deviceName"
              :value="item.deviceId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联动场景" prop="sceneIds">
          <el-select v-model="form.sceneIds" multiple placeholder="请选择" class="w100">
            <el-option
              v-for="item in sceneList"
              :key="item.sceneId"
              :label="item.sceneName"
              :value="item.sceneId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <base-select v-model="baseId" :type="2"></base-select>
  </div>
</template>

<script>
import {cfgUnit,getUnit} from '@/api/agriculture/unit'

import { listDevice } from '@/api/iot/device';
import { listScene } from '@/api/iot/scene';
import { listBatch } from '@/api/agriculture/batch';

import UnitLand from './UnitLand.vue';
import UnitAlert from './UnitAlert.vue';
import UnitBatch from './UnitBatch.vue';
import UnitCamera from './UnitCamera.vue';
import UnitIotDevice from './UnitIotDevice.vue';
import UnitScene from './UnitScene.vue';

export default {
  name: 'Unit',
  components: {
    UnitLand,
    UnitAlert,
    UnitBatch,
    UnitCamera,
    UnitIotDevice,
    UnitScene,
  },
  data() {
    return {
      baseId:null,
      landId:0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //批次列表
      batchList: [],
      //设备列表
      deviceList: [],
      //场景列表
      sceneList: [],
      //监控列表
      cameraList:[],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: null,
        landId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      //传入时间戳控制其刷新
      refresh:null
    };
  },
  watch:{
      baseId:{
          handler:function(n){
            if(n){
                this.initPage();
            }
          }
      }
  },
  methods: {
    //获取下拉数据
    initPage(){
        this.getBatchList();
        this.getDeviceList();
        this.getSceneList();
        this.getCameraList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        landId: null,
        deviceIds: [],
        sceneIds: [],
        batchIds: [],
        cameraIds:[]
      };
      this.resetForm('form');
    },
    /** 获取设备列表 */
    async getDeviceList() {
      const { rows } = await listDevice({baseId:this.baseId});
      this.deviceList = rows.filter(item=>item.isCamera=='0');
    },
    /** 获取监控列表 */
    async getCameraList() {
      const { rows } = await listDevice({baseId:this.baseId});
      this.cameraList = rows.filter(item=>item.isCamera=='1');
    },
    /** 获取场景列表 */
    async getSceneList() {
      const { rows } = await listScene({baseId:this.baseId});
      this.sceneList = rows;
    },
    /** 获取批次列表 */
    async getBatchList() {
      const { rows } = await listBatch({baseId:this.baseId});
      this.batchList = rows;
    },
    /** 单击操作 */
    ocClick(land){
        this.landId = land?.landId || 0;
    },
    /** 配置操作 */
    async handCfg(land) {
      this.reset();
      this.open = true;
      this.title = '配置种植单元';
      this.form.landId = land.landId;
      const{data} = await getUnit(land.landId);
      this.form = data;
    },
    /** 提交按钮 */
     submitForm() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
            await cfgUnit(this.form);
            this.$modal.msgSuccess("配置成功");
            this.open=false;
            this.refresh = new Date().getTime();
            console.log(333,new Date().getTime())
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.baseHeight {
  height: calc((100vh - 84px - 100px - 10px - 110px) / 2);
}
.height {
  height: calc((100vh - 84px - 100px - 10px - 50px));
}
</style>
